<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix='c' uri="http://java.sun.com/jsp/jstl/core" %>

<script type="text/javascript" src="/${initParam.rootPath }/script/membershipScript/joinScript.js"></script>

<h2>가입양식</h2>
<form name="form" method="post" action="/must_go/membership/join.do" onsubmit="return formCheck(this);">
	<table width='600'>
		<tr>
			<td>ID</td>
			<td>
				<!-- <input type="text" name="id" id="id" onkeyup="checkEng()" onblur="checkId()"> -->
				<input type="text" name="id" id="id" onkeyup="checkId()" onblur="checkEng()">
			</td>
		</tr>
		<tr>
			<td colspan="2" id="id_error" style="color: red;"></td>
		</tr>
		<tr>
			<td>Password</td>
			<td>
				<input type="password" name="password" placeholder="비밀번호(6자리 이상)" onblur="pwlengthcheck()" id="password">
			</td>
		</tr>
		<tr>
			<td>Password확인</td>
			<td>
				<input type="password" name="password2" placeholder="비밀번호확인" onblur="pwcheck()" id="password2">
			</td>
		</tr>
		<tr>
			<td colspan="2" id="password_error" style="color: red;"></td>
		</tr>
		<tr>
			<td>이름</td>
			<td>
				<input type="text" name="name" id="name" onkeyup="checkKor()">
			</td>
		</tr>
		<tr>
			<td colspan="2" id="name_error" style="color: red;"></td>
		</tr>
		<tr>
			<td>나이</td>
			<td>
				<input type="text" name="age" id="age" onkeyup="checkNum()">
			</td>
		</tr>
		<tr>
			<td colspan="2" id="age_error" style="color: red;"></td>
		</tr>
		<tr>
			<td>성별</td>
			<td>
				<input type="radio" name="gender" value="남성">남성 &nbsp;
				<input type="radio" name="gender" value="여성">여성
			</td>
		</tr>
		<tr>
			<td colspan="2" id="gender_error" style="color: red;"></td>
		</tr>
		
		<input type="hidden" name="grade" value="일반회원" >
		
		<tr>
			<td>생년월일</td>
			<td>
				<input type="hidden" name="birthDate" id="birthDate">
				
				<select name="year" id="year">
					<option>년도선택</option>
				<c:forEach begin="1900" end="2014" var="year">
					<option ${year==1980? "selected=selected":"" }>${year }</option>
				</c:forEach>
				</select>
				<select name="month" id="month" onchange="monthChange()">
					<option>월선택</option>
				<c:forEach begin="1" end="12" var="month">
					<option>${month }</option>
				</c:forEach>
				</select>
				<select name="day" id="day">
					<option>일선택</option>
				</select>
			</td>
		</tr>
		
		<tr>
			<td>이메일</td>
			<td>
				<input type="hidden" id="email" name="email">
				
				<input  type="text" class="form-control2" name="email1"
						id="email1" onkeyup="emailCheck()" onfocus="emailmsgclear()"> @ <input type="text"
						name="email2" id="email2" onkeyup="emailCheck2()"
						style="width: 80px; height: 20px; border-radius: 4px; border: 1px solid #ccc;" disabled value="naver.com"> 
						<select style="width: 100px; height: 20px" name="selectEmail" id="selectEmail">
						<option value="1">직접입력</option>
						<option value="naver.com" selected>naver.com</option>
						<option value="hanmail.net">hanmail.net</option>
						<option value="hotmail.com">hotmail.com</option>
						<option value="nate.com">nate.com</option>
						<option value="yahoo.co.kr">yahoo.co.kr</option>
						<option value="empas.com">empas.com</option>
						<option value="dreamwiz.com">dreamwiz.com</option>
						<option value="freechal.com">freechal.com</option>
						<option value="lycos.co.kr">lycos.co.kr</option>
						<option value="korea.com">korea.com</option>
						<option value="gmail.com">gmail.com</option>
						<option value="hanmir.com">hanmir.com</option>
						<option value="paran.com">paran.com</option>
					</select>
					<script type="text/javascript">
					//이메일 입력방식 선택
					$('#selectEmail').change(function() {
						$("#selectEmail option:selected").each(function() {
					
							if ($(this).val() == '1') { //직접입력일 경우
								$("#email2").val(''); //값 초기화
								$("#email2").attr("disabled", false); //활성화
							} else { //직접입력이 아닐경우
								$("#email2").val($(this).text()); //선택값 입력
								$("#email2").attr("disabled", true); //비활성화
							}
						});
					});
					</script>
			</td>
		</tr>
		<tr>
			<td id="email_error" style="color: red;"></td>
		</tr>
		
		<tr>
			<td>전화번호</td>
			<td>
				<select name="homePhone1" id="homePhone1">
					<option >02</option>
					<option>031</option>
					<option>032</option>
					<option>033</option>
					<option>041</option>
					<option>042</option>
					<option>043</option>
					<option>051</option>
					<option>052</option>
					<option>053</option>
					<option>054</option>
					<option>055</option>
					<option>061</option>
					<option>062</option>
					<option>063</option>
					<option>064</option>
					<option>070</option>
				</select>
				-<input type="text" id="homePhone2" name="homePhone2" onkeyup="checkNum2()" style="width: 60px;">
				-<input type="text" id="homePhone3" name="homePhone3" onkeyup="checkNum2()" style="width: 60px;">
				
				 <input type="hidden" name="homePhone" id="homePhone">
			</td>
		</tr>
		<tr>
			<td colspan="2" id="homePhone_error" style="color: red;"></td>
		</tr>
		
		<tr>
			<td>휴대폰</td>
			<td>
				<select name="cellPhone1" id="cellPhone1">
					<option>010</option>
					<option>011</option>
					<option>016</option>
					<option>017</option>
					<option>018</option>
					<option>019</option>
				</select>
				-<input type="text" name="cellPhone2" id="cellPhone2" onkeyup="checkNum3()" style="width: 60px;">
				-<input type="text" name="cellPhone3" id="cellPhone3" onkeyup="checkNum3()" style="width: 60px;">
				 <input type="hidden" name="cellPhone" id="cellPhone">
			</td>
		</tr>
		<tr>
			<td colspan="2" id="cellPhone_error" style="color: red;"></td>
		</tr>
		
		<tr>
			<td>SNS수신여부</td>
			<td>
				<input type="radio" name="SNSReception" >Yes &nbsp;
				<input type="radio" name="SNSReception">No 
			</td>
		</tr>
		
		<tr>
			<td>email수신여부</td>
			<td>
				<input type="radio" name="emailReception" >Yes &nbsp;
				<input type="radio" name="emailReception">No
			</td>
		</tr>
		
		<tr>
			<td>주소</td>
			<td>
				<input type="button"  onclick="findAddress()" value="우편번호 검색"><br>
				<input type="text"  id="zipCode1" name="zipCode1">-<input type="text" id="zipCode2" name="zipCode2">
				<input type="text"  id="addr1" name="addr1"> 
				<input type="text" id="addr2" name="addr2" placeholder="상세주소입력">
				
				<input type="hidden" name="zipCode" id="zipCode">
				<input type="hidden" name="address" id="address">
			</td>
		</tr>
		
		<tr>
			<td colspan="2" align="center">
				<input type="submit" value="가입">
				<input type="reset" value="다시작성">
			</td>
		</tr>
	</table>
</form>
